<template>
  <div class="carouselMain">
    <div class="carouselImg">
      <el-carousel
        :interval="4000"
        type="card"
        :autoplay="false"
        indicator-position=""
        arrow="always"
        ref="carouselRef"
        @change="imgChange()"
      >
        <el-carousel-item
          v-for="(item, index) in carouselInfoList"
          :key="index"
        >
          <img :src="item.imgPath" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="carouselInfo">
      <div
        :class="[
          'comicInfoCarouselDiv',
          { divDisplay: carouseIndex === index },
        ]"
        v-for="(item, index) in carouselInfoList"
        :key="index"
      >
        <div class="carouselTitle">
          <span>{{ item.name }}</span>
          <div><el-button type="danger">开始阅读</el-button></div>
        </div>
        <span class="carouselAutor"
          >作者: <span>{{ item.autor }}</span></span
        >
        <span class="carouselChapter">
          最新: <span>{{ item.chapter }}</span>
        </span>
        <span class="carouselFraction">
          评分:<el-rate v-model="item.fraction" disabled text-color="#ff9900">
          </el-rate>
        </span>
        <div class="carouselLable">
          <el-tag v-for="(lable, index) in item.labelList" :key="index">
            {{ lable }}
          </el-tag>
        </div>
        <span style="font-size: 14px"> 简介: </span><br />
        <span class="carouseContent">
          {{ item.content }}
        </span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    carouselInfoList: {
      type: Array
    }
  },
  data () {
    return {
      carouseIndex: 0
    };
  },
  methods: {
    imgChange () {
      this.carouseIndex = this.$refs.carouselRef.activeIndex;
    }
  }
};
</script>
<style lang="less" scoped>
.carouselMain {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.carouselMain .carouselImg {
  width: 100%;
  height: 53%;
  .el-carousel {
    height: 100%;
    /deep/ .el-carousel__container {
      height: 100%;
      .el-carousel__item {
        width: 250px;
        height: 100%;
        img {
          height: 100%;
          z-index: 1;
        }
      }
    }
    /deep/ .el-carousel__indicators {
      display: none;
    }
  }
}
.carouselMain .carouselInfo {
  width: 100%;
  flex: 1;
  //background-color: olive;
  margin-top: 10px;
  .comicInfoCarouselDiv {
    display: none;
    width: 100%;
    height: 100%;

    .carouselTitle {
      span {
        display: flex;
        align-items: center;
        display: block;
        width: 65%;
        float: left;
        height: 100%;
        font-size: 23px;
        font-weight: bold;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      div {
        display: flex;
        justify-content: flex-end;
        width: 35%;
        height: 100%;
        float: left;
      }
    }
    .carouselAutor {
      font-size: 15px;
      display: block;
      width: 100%;
      span {
        color: #b3b3b3;
        margin-left: 10px;
      }
    }
    .carouselChapter {
      font-size: 15px;
      display: block;
      width: 100%;
      margin-top: 8px;
      span {
        color: red;
        margin-left: 10px;
      }
    }
    .carouselFraction {
      font-size: 15px;
      display: block;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-top: 8px;
      .el-rate {
        width: 50%;
        float: right;
        margin-left: 10px;
        /deep/ .el-rate__item .el-rate__icon {
          font-size: 10px;
          margin-right: 3px;
        }
      }
    }
    .carouselLable {
      width: 100%;
      height: 30px;
      margin-top: 8px;
      .el-tag {
        height: 23px;
        line-height: 20px;
        margin-right: 5px;
      }
    }
    .carouseContent {
      margin-top: 5px;
      font-size: 15px;
      display: block;
      width: 100%;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      overflow: hidden;
    }
  }
  .divDisplay {
    display: block;
  }
}
</style>
